<template>
  <div class="banner">
    <el-carousel :interval="4000" arrow="always" height="400px">
      <el-carousel-item v-for="item in banner_img_list" :key="item.id" height="400px">
        <a :href="item.link">
          <img :src="item.image_url" alt="" width="100%" height="400px">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: "Banner",
    data() {
      return {
        banner_img_list: [
          // {id: 1, title: 'xx1', img_src: "/static/banner/banner1.png", link: 'https://www.baidu.com'},
          // {id: 2, title: 'xx2', img_src: "/static/banner/banner2.png", link: 'https://www.baidu.com'},
          // {id: 3, title: 'xx3', img_src: "/static/banner/banner3.png", link: 'https://www.baidu.com'},
        ]
      }
    },
    methods: {
      get_banner_data() {
        this.$axios.get(`${this.$settings.Host}/home/banner/`,).then((res) => {
          this.banner_img_list = res.data
          console.log(res.data)
        })
          .catch((error) => {
            console.log(error)
          })
      }
    },
    created() {
      this.get_banner_data()
    }
  }

</script>

<style scoped>

</style>
